<template>
  <div>
    <tt-dialog title="举报此人" size="small" v-model="isShowReport">
      <div class="report-content">
        <div class="report-option">
          <input type="radio" v-model="reportType" id="radio-forbidden" :value="1">
          <label for="radio-forbidden">淫秽���情</label>
        </div>
        <div class="report-option">
          <input type="radio" v-model="reportType" id="radio-market" :value="2">
          <label for="radio-market">营销广告</label>
        </div>
        <div class="report-option">
          <input type="radio" v-model="reportType" id="radio-hostile" :value="3">
          <label for="radio-hostile">恶意攻击谩骂</label>
        </div>
        <div class="report-option">
          <input type="radio" v-model="reportType" id="radio-complain" :value="0">
          <label for="radio-complain">我有话要说</label>
        </div>
        <textarea class="complain-text" v-if="reportType === 0" v-model="complainText"></textarea>
      </div>
      <span slot="footer" class="dialog-footer">
        <tt-button type="primary" @click="onOkClick">确认</tt-button>
        <tt-button @click="onCancelClick">取消</tt-button>
      </span>
    </tt-dialog>
  </div>
</template>
<style scoped lang="less" rel="stylesheet/less">
  .report-content {
    padding: 10px 20px;
    font-size: 16px;

    .report-option {
      margin-bottom: 10px;
      input, label {
        vertical-align: middle;
      }
    }

    .complain-text {
      width: 100%;
      height: 72px;
      font-size: 16px;
      padding: 10px;
      color: #5d5d5d;
      border: 1px #e9e9e9 solid;

      &:focus {
        outline: 0;
        border: 1px solid #aaa;
      }
    }
  }
</style>
<script>
  import reqwest from 'reqwest'
  import Cookies from 'js-cookie'

  export default {
    name: 'CommentInput',
    props: {
      reportData: {
        type: Object
      },
      isShowReport: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        reportType: 1,
        complainText: ''
      }
    },
    computed: {
      params: function () {
        return this.reportData
      }
    },
    methods: {
      onCancelClick(e) {
        this.$emit('closeReport')
      },
      onOkClick(e) {

        if (this.reportType === 0) {
          this.params.content = this.complainText.trim()

          if (this.params.content === '') {
            this.$Toast({
              message: '请填写投诉原因'
            })
            return false
          }
        }

        this.params.aid = 13
        this.params.report_type = this.reportType

        reqwest({
          url: '/report_user/',
          headers: {
            'X-CSRFToken': Cookies.get('csrftoken')
          },
          data: this.params,
          method: 'POST',
          success: (rs) => {

            var msg = '投诉失败！'

            if (rs.message === "success") {
              msg = '投诉成功！'
            }
            this.$Toast({
              message: msg
            })
            this.complainText = ''
            this.$emit('closeReport')
          }
        })
      }
    }
  }
</script>



// WEBPACK FOOTER //
// comment-report.vue?29f14014
